<template>
    <el-container class="container--login">
        <el-header>
            <div class="container">
                <h1>
                    <router-link to="/">
                        <svg-icon type="skye-logo" className="skye-logo" />
                    </router-link>
                </h1>
            </div>
        </el-header>
        <div class="main">
            <div class="container">
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item prop="loginName">
                        <el-input v-model="form.loginName" placeholder="复星邮箱账户"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="复星邮箱密码" v-model="form.password">
                            <a slot="append" class="forget" href="javascript:;">忘记密码？</a>
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item prop="captchaImage" class="captcha-image">
                        <el-input placeholder="请输入右边图片验证码" v-model="form.captchaImage">
                            <img slot="append" src=""
                                alt="" id="captcha-image">
                        </el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('form')" v-loading.fullscreen.lock="fullscreenLoading">立即登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="copyright">© 2018 天富星-移动端快速构建平台 版权所有 复星金服</div>
        </div>
    </el-container>
</template>

<script>
    import {
        mapGetters
    } from "vuex";
    export default {
        data() {
            return {
                form: {
                    loginName: "ruyang@fosun.com",
                    password: "1",
                    // captchaImage: ""
                },
                rules: {
                    loginName: [{
                            required: true,
                            message: "请输入集团邮箱账户",
                            trigger: "blur"
                        },
                        {
                            type: "email",
                            message: "请输入正确的邮箱格式",
                            trigger: ["blur", "change"]
                        }
                    ]
                },
                fullscreenLoading: false
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.fullscreenLoading = true;
                        this.$store
                            .dispatch("user/login", this.form)
                            .then(() => {
                                this.fullscreenLoading = false;
                                this.$router.push({
                                    path: "/"
                                });
                            })
                            .catch(() => {
                                this.fullscreenLoading = false;
                            });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            }
        }
    };
</script>

<style lang="less">
    @height: 60px;
    .container--login {
        .el-header {
            width: 100%;
            .container {
                padding: 0;
                height: @height;
                box-sizing: border-box;
                h1 {
                    margin: 0;
                    float: left;
                    font-size: 32px;
                    font-weight: 400;
                }
                .skye-logo {
                    height: @height;
                    width: 120px;
                }
            }
        }
        .main {
            position: absolute;
            left: 0;
            right: 0;
            top: 80px;
            bottom: 80px;
            height: 85%;
            .container {
                width: 100%;
                height: 100%;
                display: table;
                .el-form {
                    display: table-cell;
                    vertical-align: middle;
                    width: 300px;
                    padding-bottom: 100px;
                }
                .el-button {
                    width: 100%;
                }
                &::before,
                &::after {
                    display: table;
                    content: " ";
                }
                .forget {
                    color: #8f9bb2;
                    font-size: 12px;
                    &:hover {
                        color: #409eff;
                    }
                }
            }
        }
        .copyright {
            width: 100%;
            text-align: center;
            color: #8f9bb2;
            bottom: 30px;
            position: fixed;
            font-size: 14px;
        }
        .el-input-group__append {
            background-color: transparent;
        }
        .captcha-image {
            .el-input-group__append {
                padding: 0;
                background-color: #eee;
                img {
                    width: 100px;
                    height: 35px;
                }
            }
        }
    }
</style>